<script lang="ts" setup>

    import { ref,reactive, onMounted, onUnmounted} from 'vue'
    // defineOptions({name:"Person"})
    //自定义指令(directive)
    //注意：指令也有自己的生命周期
    
    //1.全局注册一个自定义指令

    //2.局部注册一个自定义指令

    let color=ref("red")
    function ff(){
        color.value="blue"
    }

    const vHighlight = {
        mounted(el:HTMLElement,binding:{value:string}){
            el.style.backgroundColor=binding.value
        }
    }

    onMounted(()=>{
        console.log("Person挂载好了")
    })
    onUnmounted(()=>{
        console.log("Person被销毁了")
    })
</script>

<template>
   <input type="text" v-focus/>

   <div v-color="color">我是红色的字</div>
   <button @click="ff">点击变颜色</button>
   <div v-highlight="'yellow'">我是高亮的字</div>
</template>

<style scoped>

</style>
